<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的关注</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<style type="text/css">
.active {
	background-color: blue;
}
</style>
<script type="text/javascript">
	$(function() {
		$("#header").load("header.html");
		
	})
</script>
</head>
<body>
	<div id="header"></div>
	<div id="all" class="container">
		<div v-if="focuses!=null">
			<table class="table table-striped table-hover text-center">
				<thead>
					<tr>
						<th>序号</th>
						<th>头像</th>
						<th>昵称</th>
						<th>角色</th>
						<th>微信</th>
						<th>qq</th>
						<th>电话</th>
						<th>描述</th>
						<th>关系</th>
						<th colspan="2">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(focus,index) in focuses" :key="index">
						<td>{{index+1}}</td>
						<td><img alt="" :src="focus.user.avatar"
							class="rounded-circle" style="width: 35px; height: 35px"></td>
						<td><a href="javascript:;" @click="moreinfo(focus.user)">{{focus.user.nickname}}</a></td>
						<td>{{focus.user.role}}</td>
						<td>{{focus.user.wechat}}</td>
						<td>{{focus.user.qq}}</td>
						<td>{{focus.user.phone}}</td>
						<td>{{focus.user.description}}</td>
						<td>{{focus.focusStatus}}</td>
						<td><button class="btn btn-outline-danger" v-if="focus.focused"
								@click=cancelFocus(focus)>取关</button>
							<button class="btn btn-outline-info" v-else
								@click=addFocus(focus)>关注</button></td>
						<td>
							<button type="button" class="btn btn-primary"
								@click=send(focus.user.id)>发送消息</button>
						</td>
					</tr>
				</tbody>
			</table>
			</table>
			<div class="row">
				<div class="offset-md-5">
					<ul class="pagination">
						<li class="page-item"><a class="page-link" href="#"
							@click.prevent="prePage"> <</a></li>
						<li class="page-item" v-for="(item, index) in pageNum"><a
							class="page-link" href="#" v-on:click.prevent="getFocus(item)"
							:class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
						<li class="page-item"><a class="page-link" href="#"
							v-on:click.prevent="nextPage">></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div v-else class="row">
			<p class="offset-md-5">您还没有关注的人哟!</p>
		</div>
	</div>
	<script type="text/javascript">
	new Vue({
		el:"#all",
		data:{
			focuses:[],
			msgContent:"",
			pageNum:0,
			currentPage:0,
		},
		mounted(){
			this.getFocus(1);
		},
		methods:{
			getFocus:function(page){
				axios.get("/focus/find?page="+page)
				.then(
					res => {
						if(res.data.code==1){
							let focuses = res.data.data.list;
							if(focuses!=null){
								focuses.forEach(el => {
									if(el.focusStatus==1){
										el.focusStatus="已关注";
									}else{
										el.focusStatus="好友";
									}
									el.focused = true;
								});
							}
							this.focuses = focuses;
							this.currentPage = res.data.data.nowPage;
							this.pageNum = res.data.data.totalPage;
						}
					}
				)
			},
			prePage:function(){
				if(this.currentPage>1){
					this.getUnread(this.currentPage-1);
				}
			},
			nextPage:function(){
				if(this.currentPage<this.pageNum){
					this.getUnread(this.currentPage+1);
				}
			},
			cancelFocus:function(focus){
				axios.get("/focus/cancel?id="+focus.user.id)
				.then(
					res => {
						if(res.data.code==1){
							layer.msg("取关成功");
							focus.focused = !focus.focused;
							if(focus.focusStatus=="已关注"){
								focus.focusStatus="未关注";
							}else if(focus.focusStatus=="好友"){
								focus.focusStatus="被关注";
							}
						}else{
							layer.msg("系统维护中，请稍后再试")
						}
					}
				)
				
			},
			addFocus:function(focus){
				axios.get("/focus/addFocus?id="+focus.user.id)
				.then(
					res => {
						if(res.data.code==1){
							layer.msg("关注成功");
							if(focus.focusStatus=="未关注"){
								focus.focusStatus="已关注";
							}else if(focus.focusStatus=="被关注"){
								focus.focusStatus="好友";
							}
							focus.focused = !focus.focused;
						}else{
							layer.msg("系统维护中，请稍后再试")
						}
					}
				)
				
			},
			send:function(id){
				layer.open({
					  type: 2,
					  skin: 'layui-layer-rim', //加上边框
					  area: ['520px', '130px'], //宽高
					  content: 'send.html?id='+id
				});
			},
			moreinfo:function(user){
				console.log(user.role);
				if(user.role=="student"){
					location.href = "/lsw/student_view.html?id="+user.id;
				}else if(user.role=="coach"){
					location.href = "/lsw/coach_view.html?id="+user.id;
				}else if(user.role=="gym"){
					location.href = "/lsw/gym_view.html?id="+user.id;
				}
			}
		}
	})
</script>
</body>
</html>